import { Form, FormItem, Input } from 'ant-design-vue'
import { defineComponent, PropType, ref } from 'vue'

import { FROM_DATA } from '../../../types'
import styles from './index.module.css'

const { useForm } = Form

export default defineComponent({
  name: 'TipsForm',
  props: {
    formData: {
      type: Object as PropType<FROM_DATA>,
      required: true
    }
  },
  setup(props) {
    const rulesRef = ref({
      unqualifiedTips: [
        {
          required: true,
          message: '请输入不符合条件提示'
        }
      ],
      activityEndedTips: [
        {
          required: true,
          message: '请输入活动已结束提示'
        }
      ],
      activityNotStartedTips: [
        {
          required: true,
          message: '请输入活动未开始提示'
        }
      ],
      pointNotEnoughTips: [{ required: true, message: '积分不足提示' }],
      winningTips: [{ required: true, message: '中奖时提示' }],
      losingTips: [{ required: true, message: '未中奖时提示' }]
    } as FormRules)
    const { validateInfos, validate } = useForm(props.formData, rulesRef)
    function submit() {
      return new Promise<void>(resolve => {
        validate().then(() => {
          resolve()
        })
      })
    }
    return { validateInfos, validate, submit }
  },
  render() {
    return (
      <div class={styles.wrap}>
        <Form wrapperCol={{ span: 5 }}>
          <FormItem
            label="不符合条件提示"
            {...this.validateInfos['unqualifiedTips']}
          >
            <Input v-model:value={this.formData.unqualifiedTips} />
          </FormItem>
          <FormItem
            label="活动已结束提示"
            {...this.validateInfos['activityEndedTips']}
          >
            <Input v-model:value={this.formData.activityEndedTips} />
          </FormItem>
          <FormItem
            label="活动未开始提示"
            {...this.validateInfos['activityNotStartedTips']}
          >
            <Input v-model:value={this.formData.activityNotStartedTips} />
          </FormItem>
          <FormItem
            label="积分不足提示"
            {...this.validateInfos['pointNotEnoughTips']}
          >
            <Input v-model:value={this.formData.pointNotEnoughTips} />
          </FormItem>
          <FormItem label="中奖时提示" {...this.validateInfos['winningTips']}>
            <Input v-model:value={this.formData.winningTips} />
          </FormItem>
          <FormItem label="未中奖时提示" {...this.validateInfos['losingTips']}>
            <Input v-model:value={this.formData.losingTips} />
          </FormItem>
        </Form>
      </div>
    )
  }
})
